import React, { Component } from 'react';
import {BrowserRouter as Router, Route,NavLink} from 'react-router-dom';

// import ContentNow from "./contentNow.js";
// import ContentWill from "./contentWill.js";
import $ from "jquery";
import "../css/base.css";
import "../css/cinema.css";
import {connect} from "react-redux";
import { Accordion, List } from 'antd-mobile';

class Cinemas extends Component {
  componentDidMount(){
    var that = this;
    that.props.changeTitle("全部影院");
    $.get("http://localhost:8080/cinema",function(res){
        var data = JSON.parse(res).data.cinemas;
        // console.log(data);
        var newArr=[];
        var part = [];
        ///[{
        //  name:"宝安区"，
        //  content:["","","","",""]
        //},{},{},{}]
      
        ////拿到，每个区
        for(var i = 0;i<data.length;i++){
            if(part.indexOf(data[i].district.name)==-1){
              part.push(data[i].district.name);
            }
        }
        // console.log(part)
        // 去除乱码
        var newPart = [];
        for(var i =0;i<part.length;i++){ 
            if(/^[\u4e00-\u9fa5]+$/.test(part[i])){
              newPart.push(part[i])
            }
        }

        for(var i = 0;i<newPart.length;i++){    //newPart：存放区域的数组 ：福田区，。。。。。
            var obj={};
            obj.name=newPart[i],
            obj.content=[];
            for(var j = 0;j<data.length;j++){       //data：所有影院的信息
              if(newPart[i]==data[j].district.name){  
                 obj.content.push(data[j])
              }
            }
            newArr.push(obj);
        }
        console.log(newArr)

        that.props.getCinema(newArr);
    })
  }
  render() {
      return (
        <div className="components">
        <Accordion defaultActiveKey="0" className="my-accordion" onChange={this.onChange} className="list">
                {
                  this.props.getCinemaData.map(function(item,index){
                    return (
                            <Accordion.Panel header={item.name} key={index} className="li">
                            <List className="my-list">
                              {
                                  item.content.map(function(val,num){
                                    return(
                                     
                                        <List.Item className="content" key={num}>
                                          <dt><h3>{val.name}</h3><span className="icon zuo">座</span><span className="icon tong">通</span><i className="iconfont">&#xe649;</i></dt> 
                                          <dd className="active_icon"><span className="eat">可乐爆米花</span><span className="youhui">优惠活动</span></dd>
                                          <dd className="address">{val.address}</dd>
                                          <dd className="distance">距离未知</dd>
                                        </List.Item>
                                      
                                    )
                                })
                              }
                            </List>
                          </Accordion.Panel>
                      )
                  })
                }
               
            </Accordion>
        </div>
      );
  }
  
}

var Cinema = connect(
  function(state, ownProps) {
    return {
         getCinemaData:state.cinemaData 
    }
  },
  function(dispatch, ownProps) {
     return {
        getCinema:function(data){
            dispatch({
                type:"GETCINEMA",
                data:data
            })
        },
         changeTitle:function(data){
          dispatch({
                type:"CHANGETITLE",
                title:data
          })
      }

    }
  }
)(Cinemas);

export default Cinema;
